<template>
  <div class="app-container">
      <div style="margin: 10px auto 0;">
        <div class="card">
          <el-card shadow="hover" style="margin: 10px" :body-style="{ padding: '10px' }" v-for="data in dataList" :key="data.id">
            <div slot="header" style="vertical-align: text-top;font-size: 10px">
              <el-row :gutter="24" style="height: 110px">
                <el-col :span="10">
                  <el-image v-if="data.residenturl ==undefined" style="height: 100px"
                            :src="require('@/assets/images/profile.jpg')"
                            :preview-src-list="[require('@/assets/images/profile.jpg')]" class="thumbnail">
                  </el-image>
                  <el-image v-else style="height: 100px" :src="data.photo" :preview-src-list="[data.photo]"
                            class="thumbnail"></el-image>
                </el-col>
                <el-col :span="14">
                  <span style="font-weight: bold">上报日期：{{ data.date }}</span>
                  <div style="margin-top: 15px">
                    记录状态：{{data.status==0?'未处理':'已处理'}}<el-button v-show="data.status==0" type="primary" style="margin-left: 10px" size="mini" @click="handleDeal(data.id)">立即处理</el-button>
                  </div>
                </el-col>
              </el-row>
            </div>
            <el-descriptions :labelStyle="{ width: '40%' }" class="margin-top" :column="1" size="mini" border>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-postcard"></i>上报地址
                </template>
                {{ data.address }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-mobile-phone"></i>描述信息
                </template>
                {{ data.description }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-s-home"></i>单车位置
                </template>
                {{data.location}}
              </el-descriptions-item>
            </el-descriptions>
          </el-card>
        </div>
      </div>
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageSize" :limit.sync="queryParams.recordSize"
                @pagination="getList" />
  </div>
</template>

<script>
import {listBrokenBike,dealBike} from "@/api/bike/bike";

export default {
  name: "Broken",
  data () {
    return {
      // 显示搜索条件
      showSearch: true,
      // 显示
      show: true,
      // 总条数
      total: 0,
      // 表格数据
      dataList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageSize: 1,
        recordSize: 10,
      },
    };
  },
  created () {
    this.getList();
  },
  methods: {
    /** 查询列表 */
    getList () {
      this.loading = true;
      listBrokenBike().then((res) => {
        if (res.data !== null) {
          res.data.forEach(i => {
            if (i.description !== '超出运营区内') {
              this.dataList.push(i)
            }
          })
          this.total =  this.dataList.length;
        } else {
          this.total = 0;
          this.dataList = [];
        }
        this.loading = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery () {
      this.queryParams.pageSize = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery () {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 处理按钮操作 */
    handleDeal(id){
      dealBike(id).then(res=>{
        this.$modal.msgSuccess("处理成功");
        this.getList()
      })
    }
  },
};
</script>
<style scoped lang="scss">
.cellBox {
  display: flex;

  .text {
    font-weight: 700;
  }
}

.card {
  display: flex;
  flex-wrap: wrap;
}

.jump:hover {
  color: blue;
  text-decoration: underline;
  cursor: pointer;
}
</style>
